<template>
  <view class="bg-[#F3F4F6]">
    <view class="c-br c-pd bg-white m-[10px] flex justify-between items-center" v-for="(item, index) in localeList" @click="gotoDetails(item.id, item.state)" :key="index">
      <view>
        <view class="c-text-16 font-bold">
          {{ item.name }}
          <i v-if="!item.state" class="i-proicons:do-not-disturb text-30px c-text-color-grey">></i>
        </view>
        <view class="c-text-12 pt-[10px]"> {{ item.useCount ? item.useCount : 0 }}个设备 </view>
      </view>
      <view>
        <van-icon v-if="item.state" name="arrow" size="35rpx" />
        <van-button v-else type="danger" size="mini" @click="handleUnbindLocale(item.id)">取消绑定</van-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import EquipRequest from '@/request/equipRequest';
import { navigate } from '@/utils/navigate';
import useModal from '@/hooks/useModal';
import useToast from '@/hooks/useToast';

const { showModal } = useModal();
const { showToast } = useToast();
const localeList = ref<ILocaleFewInfoRes[]>([]);

onLoad(() => {
  getLocaleList();
});

const getLocaleList = () => {
  EquipRequest.LocaleList({ hasLoading: true }).then((res) => {
    localeList.value = res.data;
  });
};

const gotoDetails = (id: number, state: number) => {
  if (!state) showToast('场所申请中...', 'fail');
  else navigate({ url: '/subcontract/equipment/locale/detail/index?id=' + id });
};

const handleUnbindLocale = (id: number) => {
  showModal('是否取消绑定场所？', {
    showCancel: true,
    success: (res) => {
      if (res.confirm) {
        EquipRequest.UnbindingLocale({ id: id, state: -1 }).then((res) => {
          if (res) {
            showToast('解绑成功', 'success');
            getLocaleList();
          } else {
            showToast('解绑失败，请稍候再试', 'fail');
          }
        });
      }
    },
  });
};
</script>
